<template>
  <van-sidebar v-model="activeKeyTemp" @change="change">
    <div v-for="(center, center_index) in items" :key="center_index">
      <div class="title">{{center.key}}</div>
      <van-sidebar-item
        v-for="(item, index) in center.children"
        :title="item.title"
        :key="index"
        replace
        :to="'/code/?id=' + item._id"
      />
    </div>
  </van-sidebar>
</template>
<script>
export default {
  name: "ASidebar",
  props: {
    activeKey: {
      type: String,
      default: "0",
    },
    items: {
      type: Array,
      default() {
        return [];
      },
    },
    replace: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeKeyTemp: this.activeKey,
    };
  },
  methods: {
    change(e) {
      this.$emit("change", e);
    },
  },
};
</script>

<style>
</style>